VisualHMI - 动态绘图控件

什么是动态绘图控件？

image-20231117170124483

动态绘图控件相当于一个“绘图板”功能，通过设置一段连续寄存器，实现绘图点、线、圆、图、封闭图形等等。而具体的类型，由设置变量地址的首地址决定。用户通过改变存储器中的数据，来绘制不同的图形、位置、数量、大小等

适用范围：VisualHMI - HMI&M系列

例程下载链接：VisualHMI - 动态绘图控件(点击下载)

1.属性介绍

本章节重点介绍动态绘图控件的属性，分为基本设置和外观设置

image-20231123192241774

设置连续寄存器格式如下所示：

LW CMD 绘制图形类型
LW+1 Draw_Cnt 最大数据包数据：一个矩形、两个矩形
LW+2 DATA N个字节，数据段
LW+1+N END 结束字段，固定为0xFF00

命令列表如下所示:

image-20231118135148267

1.1. 画点

动态绘图控件，以地址LW2000为例，DCBUS协议下，画点数据段格式如下所示：

image-20231121090948054

PLC给屏幕发送指令如下所示：在（0x01F4,0x00F0）位置显示一个红色的点。

AA55 00 0F F1 2000 0001 0001 01F4 00F0 F800 FF00 CCCC

1.2. 端点连线

动态绘图控件，以地址LW2000为例，DCBUS协议下，端点连线数据段格式如下所示：

image-20231120193220014

PLC给屏幕发送指令如下所示：发送4个坐标，依次连接起来形成3条线段

AA55 00 1D F1 2000 0002 0003 FFFF 012C 012C 01F4 012C 01F4 0064 02BC 0064 FF00 CCCC

1.3. 矩形

动态绘图控件，以地址LW2000为例，在DCBUS协议下，绘制“矩形”图形，矩形数据段格式如下所示：

image-20231120174017719

PLC给屏幕发送指令如下所示：显示两个矩形框：

矩形1位置，左上：0x011E, 0x00AA；右下：0x01AA，0x010A，颜色0x471A

矩形2位置，左上：0x0258, 0x0064；右下：0x02BC，0x012C，颜色0x2C4A

AA55 00 1F F1 2000 0003 0002 011E 00AA 01AA 010A 471A 0258 0064 02BC 012C 2C4A FF00 CCCC

1.4. 矩形填充

动态绘图控件，以地址LW2000为例，在DCBUS协议下，绘制“填充矩形”图形，格式如下所示：

image-20231120174112090

PLC给屏幕发送指令如下所示：显示两个矩形框：

矩形1位置，左上：0x011E, 0x00AA；右下：0x01AA，0x010A，颜色0x0000

矩形2位置，左上：0x0258, 0x0064；右下：0x02BC，0x012C，颜色0xFFFF

AA55 00 1F F1 2000 0004 0002 011E 00AA 01AA 010A 0000 0258 0064 02BC 012C FFFF FF00 CCCC

1.5. 圆形

动态绘图控件，以地址LW2000为例，在DCBUS协议下，绘制“圆形”图形，格式如下所示：

image-20231120175343025

PLC给屏幕发送指令如下所示：显示1个圆形：

圆心位置0x01F4, 0x00FA；半径：0x0096,颜色：0xFEA0

AA55 00 13 F1 2000 0005 0001 01F4 00FA 0096 FEA0 FF00 CCCC

1.6.频谱（垂直线段）

动态绘图控件，以地址LW2000为例，在DCBUS协议下，绘制“频谱”图形，格式如下所示, 把(Xn,Yn） (Xn,Yn）用 Colorn颜色连线：

image-20231120175750307

PLC给屏幕发送指令如下所示：显示5条垂线：

  • 垂线1：红色0xF800,点(0x0168, 0x0064)和(0x0168, 0x0064)
  • 垂线2：红色0xF800,点(0x0190 , 0x0064)和(0x0190, 0x0096)
  • 垂线3：红色0xF800,点(0x01C2, 0x0064)和(0x01C2, 0x00C8)
  • 垂线4：红色0xF800,点(0x01F4, 0x0064)和(0x01F4, 0x00FA)
  • 垂线5：红色0xF800,点(0x0226, 0x0064)和(0x0226, 0x 012C)

AA55 00 33 F1 2000 0009 0005 F800 0168 0064 0064 F800 0190 0064 0096 F800 01C2 0064 00C8 F800 01F4 0064 00FA F800 0226 0064 012C FF00 CCCC

1.7.图片

动态绘图控件，以地址LW2000为例，在DCBUS协议下，图片区域剪 切、粘贴，格式如下所示：

image-20231120184855998

PLC给屏幕发送指令如下所示：裁剪图片0（0x0021,0x0027)~（0x00A3,0x0040)区域大小的内容，并显示到（0x0168 , 0x0168 ）位置

AA55 00 19 F1 2000 0007 0001 0000 0021 0027 00A3 0040 0168 0168 FF00 CCCC

1.7.1 PIC ID 查看

工程编译后，生成在private下载资源包，其中会将本次使用到的图片文件生成一个image.binwen文件(../private/image.bin)。

PIC ID对应的图片，需要打开工程目录下../build/image.xml文件，如下所示，id = 0 ,对应《主界面.jpg》，即是画面0的背景图片。

<image id="0" name="H:\Project BaseGraph\image\主界面.jpg_w800_h480"/>

image-20231120185644413

1.8 封闭区域填充

需要做两个动态绘图显示框，设置两个不同变量地址，如一个变量地址设置0x1001，一个设置0x2000，同时底图区必须为纯色，不然不能正常填充

[!note|tip:注意] 两个动态绘图控件，设置填充色0x0008指令，必须在设置封闭图形的控件上层。如本历程，0x1001设置填充色，0x2000设置封闭图形

1.8.1 设置画面背景色纯色

如下所示，设置画面背景色为纯色

image-20231120190814949

1.8.2.设置封闭区域

PLC发送端点连线，设置动态绘图控件0x2000, 形成一个封闭几何体图形

AA55 00 21 F1 2000 0002 0004 F000 01A8 00A0 016D 0126 01F9 0169 0205 0125 01A8 009F FF00 CCCC

1.8.2.设置填充色

动态绘图控件，以地址LW1001为例，在DCBUS协议下，封闭图形颜色格式如下所示：

image-20231120191821391

  • 若X，Y在封闭域内，则填充封闭区域为红色0xF800
  • 若X,Y不在封闭内，则填充非封闭区域的红色0xF800

PLC给屏幕发送指令如下所示：将封闭区域的颜色设置为红色0xF800

AA 55 00 11 F1 1001 0008 0001 01A4 00F6 F800 FF00 CCCC

1.9.线段

动态绘图控件，以地址LW2000为例，在DCBUS协议下，绘制“线段”图形，格式如下所示，把(XnS,YnS） (XnE,YnE）用 Colorn颜色连线：

image-20231120184620614

PLC给屏幕发送指令如下所示：显示4条线段：

  • 线段1：红色0x7412,点(0x0168,0x00E6 )和(0x0190,0x00E6 )
  • 线段2：红色0xF800,点(0x0168,0x010E )和(0x01C2 ,0x010E)
  • 线段3：红色0x7412,点(0x0168, 0x0140)和(0x01F4, 0x0140)
  • 线段4：红色0xF800,点(0x0168, 0x0172)和(0x0226, 0x 0172)

AA55 00 33 F1 2000 000A 0004 7412 0168 00E6 0190 00E6 F800 0168 010E 01C2 010E 7412 0168 0140 01F4 0140 F800 0168 0172 0226 0172 FF00 CCCC

1.10 矩形反色填充

动态绘图控件，以地址LW2000为例，在DCBUS协议下绘制“反色矩形”图形，格式如下所示：

image-20231120183411540

主板给屏幕发送指令如下所示

PLC给屏幕发送指令如下所示：显示1个反色矩形：

矩形1位置，左上：0x0168 , 0x00E6 ；右下：0x0190 ，0x010E ，颜色0x49F1 ，(0XFFFF -0x49F1 )

AA55 00 15 F1 2000 000D 0001 0168 00E6 0190 010E 49F1 FF00 CCCC

2.LUA脚本设置

动态绘图控件，是设置连续的寄存器绘制图形，在LUA脚本中，可以通过set_array() API函数实现

2.1 画面配置

画面中添加第一个动态绘图控件，地址为0x2000，如下所示

image-20231121091552517

画面中添加第2个动态绘图控件，地址为0x1001，用来演示区填充，如下所示

image-20231121094144187

画面中添加10个字设置按钮，地址为0xF000，设置常量依次1~10。用于点击设置动态绘图控件，显示不同的图形，如下所示

image-20231121094415954

2.2.LUA脚本

2.2.1.编辑脚本

依次点击“字设置按钮”，将触发on_updata 函数。获取0xF000的值，根据不同寄存器的值，绘制不同的图形，程序如下所示

_ENCRYPT_=0    --LUA脚本加密

--数据类型定义
VT_LW = 1    --变量地址
VT_RW = 2    --FLASH存储

baseGraphCmd = {
    opint      = 0x0001,
    Connection = 0x0002,
    rect       = 0x0003,
    PIC        = 0x0006,
    ICON       = 0x0007,
    rectFill   = 0x0004,
    circle     = 0x0005,
    fill       = 0x0008,
    Spectrum   = 0x0009,
    line       = 0x000A,
    rectFillOr = 0x000D
}

function on_update(slave,vtype,addr)

    if vtype == VT_LW
    then
        if addr == 0xF000
        then
            local key = get_uint16(vtype, addr) 
            set_array(VT_LW, 0x2000, {0XFFFF, 0XFFFF,  0XFFFF, 0XFFFF, 0XFFFF, 0XFFFF})

            if key == 1 -- 点
            then
                local data = {baseGraphCmd.opint, 0x0003, 0x01F4, 0x00F0, 0xF800, 0x01F5, 0x00F1, 0xF800, 0x01F6, 0x00F3, 0xF800, 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 2 -- 端点连线
            then
                local data = {baseGraphCmd.Connection, 0x0003, 0xFFFF, 0x012C, 0x012C,
                                                                       0x01F4, 0x012C,
                                                                       0x01F4, 0x0064,
                                                                       0x02BC, 0X0064, 0xFF00}

                set_array(VT_LW, 0x2000, data)

            elseif key == 3 -- 矩形
            then
                local data = {baseGraphCmd.rect, 0x0002, 0x011E, (0x012C-130),
                                                         0x01AA, (0x018C-130), 0x471A,
                                                         0x0258, 0x0064,
                                                         0x02BC, 0x12C, 0x2C4A, 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 4 -- 填充矩形
            then
                local data = {baseGraphCmd.rectFill, 0x0002, 0x011E, (0x012C-130),
                                                             0x01AA, (0x018C-130), 0x0000,
                                                             0x0258, 0x0064,
                                                             0x02BC, 0x12C, 0xFFFF, 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 5 -- 圆形
            then
                local data = {}
                data = {baseGraphCmd.circle, 0x0001, 0x01F4, 0x00FA, 0x0096, 0xfea0, 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 6 -- 频谱（垂直线段）
            then

                local data = {baseGraphCmd.Spectrum, 0x0005, 0xF800, 0x0168, 0x0064, 0x0064,
                                                             0xF800, 0x0190, 0x0064, 0x0096,
                                                             0xF800, 0x01C2, 0x0064, 0x00C8,
                                                             0xF800, 0x01F4, 0x0064, 0x00FA,
                                                             0xF800, 0x0226, 0x0064, 0x012C, 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 7 -- 图片填充
            then
                local data = {baseGraphCmd.ICON , 0x0001 , 0x0000 , 0x0021 , 0x0027 , 0x00A3 , 0x0040 , 0x0168 , 0x0168 , 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 8 --封闭填充
            then
                local data = {baseGraphCmd.Connection, 0x0004, 0xF000, 424, 160,365, 294,505, 361,517, 293, 424, 159, 0xFF00}
                set_array(VT_LW, 0x2000, data)

                local data = {baseGraphCmd.fill, 0x0001,  0, 0, 0xf800, 0xFF00}
                set_array(VT_LW, 0x1001, data)

            elseif key == 9 -- 线段
            then
                local data = {baseGraphCmd.line, 0x0004, 0x7412, 0x0168, (0x0168-130), 0x0190, (0x0168-130),
                                                         0xF800, 0x0168, (0x0190-130), 0x01C2, (0x0190-130),
                                                         0x7412, 0x0168, (0x01C2-130), 0x01F4, (0x01C2-130),
                                                         0xF800, 0x0168, (0x01F4-130), 0x0226, (0x01F4-130), 0xFF00}
                set_array(VT_LW, 0x2000, data)

            elseif key == 10 -- 反色矩形
            then
                local data = {baseGraphCmd.rectFillOr, 0x0001, 0x0168, (0x0168-130), 0x0190, (0x0190-130), 0x49f1, 0xFF00}
                set_array(VT_LW, 0x2000, data)
            end
        end
    end
end

2.2.2.运行虚拟屏

运行虚拟屏，点击对应的按钮，效果如下所示：

Video_2023-11-21_102726~1

测试封闭区域填充，需要将背景设置为纯色，显示效果如下所示：

Video_2023-11-21_103701

Copyright ©Dacai all right reserved，powered by Gitbook该文件修订时间： 2024-04-17 11:08:45

results matching ""

    No results matching ""